<template>
	<!-- 积水险情 -->
	<view>
		<view class="item_detail_box box_shadow" :style="!isUp ? hide : show" v-show="!showPopup"> 
			<pull-up :isUp.sync="isUp"></pull-up>
			<!-- <view style="display: flex; justify-content: space-between;">
				<div @click="showArea = true" class="areaDiv">{{value}}</div>
			</view>
			<u-select v-model="showArea" :list="area" @confirm="confirm"></u-select> -->
			<ul class="numBox">
				<li><image src="../image/icon_reverise.png" mode=""></image>积水险情：{{totalAlert}} 个</li>
			</ul>
			<scroll-view class="content" :scroll-y="isUp" :scroll-top="scrollTop" @scroll='handleScroll'>
				<u-table v-if="isUp" align="left">
					<u-tr>
						<u-th>地址</u-th>
						<u-th style="text-align: center;">积水深度(cm)</u-th>
					</u-tr>
					<u-tr v-for="item in tableList"  @click.native="handleClick(item.properties)">
						<u-td>{{item.properties.address}}</u-td>
						<u-td v-if="item.properties.stagDepth==1" style="text-align: center;">30CM以下</u-td>
						<u-td v-if="item.properties.stagDepth==2" style="text-align: center;">30CM-50CM</u-td>
						<u-td v-if="item.properties.stagDepth==3" style="text-align: center;">50CM以上</u-td>
					</u-tr>
				</u-table>
			</scroll-view>
		</view>
		
		<u-popup class="popupBox" v-model="showPopup" mode="bottom" length="450rpx" :mask="false" :mask-close-able="false" :closeable="true">
			<view class="popupDetail">
				<h2>{{popupDetail.address}}</h2>
				<ul>
					<li>
						<label>积水深度:</label><span>{{popupDetail.stagDepth}}(cm)</span>
					</li>
					<li>
						<label>发生时间:</label><span>{{popupDetail.happenTime}}</span>
					</li>
					<li>
						<label>上报人:</label><span>{{popupDetail.senderName}} {{popupDetail.phone}}</span>
					</li>
				</ul>
				<a class="viewDetail" @click="goDetail">详情</a>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {Et} from "../../../assets/js/Oak.js";
	export default {
		data() {
			return {
				isUp: false, //默认收起状态
				show: "height: 800rpx;",
				hide: "height: 240rpx;",
				scrollTop: 0,
				showArea: false,
				value: '天府区', //下拉默认值
				area: [{
						value: '1',
						label: '天府区'
					},
					{
						value: '2',
						label: '天府区1'
					}
				],
				totalAlert: 0,
				tableList: [],
				showPopup:false,
				popupDetail:[],
				type:'',
				checked:{}
			}
		},

		mounted() {
			var vm = this;
			Et.Manager.register("pointChange",(data,type)=>{
				this.type = type
				if(type=='MONITOR_RG'){
					vm.popupDetail = data
				}
				setTimeout(function(){
					vm.showPopup = true
				},10)
			})
		},
		watch: {
			isUp(newVal) {
				if (!newVal) {
					this.scrollTop = Math.random();
				}
			},
			checked: function(newVal) {
				this.$emit("check", newVal, "rain");
			}
		},
		created() {
			this.Request()
		},
		methods: {
			handleClick: function(item) {
				this.checked = item;
				Et.Manager.dispatch("pointChange", item, item.layerId)
			},
			goDetail(){
				//type 1.积水  2.工程
				uni.navigateTo({url: '/pages/scheduling/taskManage/details?id='+this.popupDetail.taskId+'&type=1'});
			},
			handleScroll(e) {
				if (e.detail.scrollTop < -150) {
					this.isUp = false
				}
			},
			confirm(e) {
				console.log(e);
				this.value = e[0].label
			},
			Request() {
				this.$api.reqApi.getJSAndGCList({type:1}).then(res => {
					res.features.forEach((ele,index) => {
						ele.properties.layerId = res.layerId
						ele.properties.id = index
					});
					this.tableList = res.features
					this.totalAlert = this.tableList.length
					this.$emit('mapList', res);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		overflow: hidden;
		text-overflow: ellipsis; //超出部分以省略号显示 
		white-space: nowrap;
	}
	.box_shadow {
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
	}
	.numBox {
		li {
			display: flex;
			align-items: center;
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}
		}
	}
	scroll-view {
		height: calc(100% - 160rpx);
	}
</style>
